<template>
  <div class="app-container">
    <el-form :model="queryParams" size="small" :inline="true">
      <el-form-item label="所属小区：">
        <el-select @change="plotChange" v-model="queryParams.plotId" placeholder="请选择" clearable style="width: 200px">
          <el-option v-for="dict in xiaoquData" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属楼栋：" style="position: unset;">
        <el-select @change="buildChange" v-model="queryParams.buildId" placeholder="请选择" clearable style="width: 200px">
          <el-option v-for="dict in loudongData" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item></el-form-item>
    </el-form>

    <div class="list_box">
      <!-- <div class="tag color1"></div>
      <span class="word">23.1-26.9°C</span>
      <div class="tag color2"></div>
      <span class="word">27-30°C</span>
      <div class="tag color3"></div>
      <span class="word">31-36°C</span>
      <div class="tag color4"></div>
      <span class="word">36-41°C</span>
      <div class="tag color5"></div>
      <span class="word">设备离线</span> -->
      <div class="tag color1"></div>
      <span class="word">0-18°C</span>
      <div class="tag color2"></div>
      <span class="word">18-23°C</span>
      <div class="tag color3"></div>
      <span class="word">23-28°C</span>
      <div class="tag color4"></div>
      <span class="word">>28°C</span>
      <div class="tag color5"></div>
      <span class="word">设备离线</span>
    </div>

    <div class="box">
      <div class="container" v-for="(item, index) in mulData" :key="index">
        <div class="left">
          <img src="../../assets/images/left.png" style="width: 100%;height: 100%;" alt="">
        </div>
        <div class="right">
          <div class="right_top">
            <div class="word">{{ item.unitName }}</div>
            <span class="leftLine"></span>
            <span class="rightLine"></span>
            <div class="build-top-bottom"></div>
          </div>
          <div class="right_bottom">
            <div :key="index" v-for="(floor, index) in item.householdVoList" class="floor">
              <div :data-attr="v.content" :class="v.status == -1 ? 's_box' : 'b_box'" v-for="(v, i) in floor" :key="i"
                @click="goDetailed(v)">
                <!-- <span>{{ v.houseNumber }}</span> -->
                <!-- status: 0未知 1在线 2离线 -->
                <!-- 没有数据，白色 -->
                <!-- <img v-if="v.status === -1" class="back_img" src="../../assets/images/back (2).png"> -->
                <!-- 温度蓝色 -->
                <!-- <img v-if="v.roomTemperature >= 23.1 && v.roomTemperature <= 26.9" class="back_img"
                  src="../../assets/images/back (3).png"> -->
                <!-- 温度黄色 -->
                <!-- <img v-else-if="v.roomTemperature >= 27 && v.roomTemperature <= 30" class="back_img"
                  src="../../assets/images/back (5).png"> -->
                <!-- 温度橙色 -->
                <!-- <img v-else-if="v.roomTemperature >= 31 && v.roomTemperature <= 36" class="back_img"
                  src="../../assets/images/back (6).png"> -->
                <!-- 温度红色 -->
                <!-- <img v-else-if="v.roomTemperature >= 37" class="back_img" src="../../assets/images/back (4).png"> -->
                <!-- <div v-if="v.roomTemperature > 0 && v.roomTemperature < 23.1" class="allbaise">
                  {{ v.houseNumber }}
                </div>
                <div v-if="v.roomTemperature >= 23.1 && v.roomTemperature <= 26.9" class="wave" :style="{'--l':v.valveOpen+'%'}">
                  {{ v.houseNumber }}
                </div>
                <div v-if="v.roomTemperature >= 27 && v.roomTemperature <= 30" class="wave" :style="{'--c':'#fac74f','--l':v.valveOpen+'%'}">
                  {{ v.houseNumber }}
                </div>
                <div v-if="v.roomTemperature >= 31 && v.roomTemperature <= 36" class="wave" :style="{'--c':'#fe9a76','--l':v.valveOpen+'%'}">
                  {{ v.houseNumber }}
                </div>
                <div v-if="v.roomTemperature >= 36 && v.roomTemperature <= 41" class="wave" :style="{'--c':'#ff0045','--l':v.valveOpen+'%'}">
                  {{ v.houseNumber }}
                </div>
                <div v-if="v.roomTemperature > 41" class="allhongse">
                  {{ v.houseNumber }}
                </div>
                <div v-if="v.roomTemperature===null" class="wave" :style="{'--c':'#dfdfdf','--l':v.valveOpen+'%'}">
                  {{ v.houseNumber }}
                </div> -->

                <!-- <div v-if="v.roomTemperature===null && v.valveOpen===null" class="allbaise">
                  {{ v.houseNumber }}
                </div> -->
                <div v-if="v.roomTemperature === null && v.valveOpen===null">
                  {{ v.houseNumber }}
                </div>
                <div v-if="v.roomTemperature === null && v.valveOpen===0">
                  {{ v.houseNumber }}
                </div>
                <div v-if="v.roomTemperature === null && v.valveOpen>0" class="wave" :style="{'--c':'#dfdfdf','--l':v.valveOpen+'%'}">
                  {{ v.houseNumber }}
                </div>
                <div v-if="v.roomTemperature > 0 && v.roomTemperature <= 18" class="wave" :style="{'--c':'#00B4FF','--l':v.valveOpen+'%'}">
                  {{ v.houseNumber }}
                </div>
                <div v-if="v.roomTemperature > 18 && v.roomTemperature <= 23" class="wave" :style="{'--c':'#fac74f','--l':v.valveOpen+'%'}">
                  {{ v.houseNumber }}
                </div>
                <div v-if="v.roomTemperature > 23 && v.roomTemperature <= 28" class="wave" :style="{'--c':'#fe9a76','--l':v.valveOpen+'%'}">
                  {{ v.houseNumber }}
                </div>
                <div v-if="v.roomTemperature >28" class="wave" :style="{'--c':'#ff0045','--l':v.valveOpen+'%'}">
                  {{ v.houseNumber }}
                </div>
                
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
// import data5 from '@/utils/data5.json'
import { getUnitHousehold } from '@/api/balancedView/balancedView'
import { listCPlotSelect, listBuildSelect } from "@/api/system/utils";

export default {
  data() {
    return {
      queryParams: {
        plotId: '',
        buildId: ''
      },
      xiaoquData: [],
      loudongData: [],
      originData: [
        { dan: '1-1-101', stauts: 0, content: '1-1-101\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：45.32%\n室温：28℃' },
        { dan: '1-1-102', stauts: 1, content: '1-1-102\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：45.32%\n室温：28℃' },
        { dan: '1-1-103', stauts: 2, content: '1-1-103\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：45.32%\n室温：28℃' },
        { dan: '1-2-104', stauts: 3, content: '1-2-104\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：45.32%\n室温：28℃' },
        { dan: '1-2-101', stauts: 4, content: '1-2-104\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：45.32%\n室温：28℃' },
        { dan: '1-2-102', stauts: 5, content: '1-2-102\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：45.32%\n室温：28℃' },
        { dan: '1-2-103', stauts: 5, content: '1-2-103\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：45.32%\n室温：28℃' },
        { dan: '1-2-104', stauts: 0, content: '1-2-104\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：45.32%\n室温：28℃' },
        { dan: '1-3-101', stauts: 0, content: '1-3-101\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：45.32%\n室温：28℃' },
        { dan: '1-3-102', stauts: 0, content: '1-3-102\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：45.32%\n室温：28℃' },
        { dan: '1-3-103', stauts: 0, content: '1-3-103\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：76.38%\n室温：28℃' },
        { dan: '1-3-104', stauts: 0, content: '1-3-104\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：45.32%\n室温：28℃' },
        { dan: '1-4-101', stauts: 0, content: '1-4-101\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：45.32%\n室温：28℃' },
        { dan: '1-4-102', stauts: 0, content: '1-4-102\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：76.38%\n室温：28℃' },
        { dan: '1-4-103', stauts: 0, content: '1-4-103\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：45.32%\n室温：28℃' },
        { dan: '1-4-104', stauts: 0, content: '1-4-104\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：45.32%\n室温：28℃' },
        { dan: '1-5-101', stauts: 0, content: '1-5-101\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：76.38%\n室温：28℃' },
        { dan: '1-5-102', stauts: 0, content: '1-5-102\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：45.32%\n室温：28℃' },
        { dan: '1-5-103', stauts: 0, content: '1-5-103\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：76.38%\n室温：28℃' },
        { dan: '1-5-104', stauts: 0, content: '1-5-104\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：45.32%\n室温：28℃' },
        { dan: '1-6-101', stauts: 0, content: '1-6-101\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：45.32%\n室温：28℃' },
        { dan: '1-6-102', stauts: 0, content: '1-6-102\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：76.38%\n室温：28℃' },
        { dan: '1-6-103', stauts: 0, content: '1-6-103\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：45.32%\n室温：28℃' },
        { dan: '1-6-104', stauts: 0, content: '1-6-104\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：45.32%\n室温：28℃' },
        { dan: '1-7-101', stauts: 0, content: '1-7-101\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：45.32%\n室温：28℃' },
        { dan: '1-7-102', stauts: 0, content: '1-7-102\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：76.38%\n室温：28℃' },
        { dan: '1-7-103', stauts: 0, content: '1-7-103\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：45.32%\n室温：28℃' },
        { dan: '1-7-104', stauts: 0, content: '1-7-104\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：45.32%\n室温：28℃' },
        { dan: '1-8-101', stauts: 0, content: '1-8-101\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：76.38%\n室温：28℃' },
        { dan: '1-8-102', stauts: 0, content: '1-8-102\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：45.32%\n室温：28℃' },
        { dan: '1-8-103', stauts: 0, content: '1-8-103\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：76.38%\n室温：28℃' },
        { dan: '1-8-104', stauts: 0, content: '1-8-104\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：45.32%\n室温：28℃' },
        { dan: '1-9-101', stauts: 0, content: '1-9-101\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：45.32%\n室温：28℃' },
        { dan: '1-9-102', stauts: 0, content: '1-9-102\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：45.32%\n室温：28℃' },
        { dan: '1-9-103', stauts: 0, content: '1-9-103\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：45.32%\n室温：28℃' },
        { dan: '1-9-104', stauts: 0, content: '1-9-104\n室温采集器状态：在线\n阀门状态：在线\n阀门开度：45.32%\n室温：28℃' },
      ],
      mulData: [],
    }
  },
  created() {
    let { plotId, buildId } = this.$route.query
    this.getPlotSelectList()
    if (plotId) {
      listBuildSelect({ plotId }).then(res => {
        this.loudongData = res.rows
      })
    }
    if (plotId && buildId) {
      this.queryParams.plotId = plotId
      this.queryParams.buildId = buildId
      this.getUnitHouseholdList()
    }
  },
  mounted() {
    // function getRndInteger(min, max) {
    //   return Math.floor(Math.random() * (max - min)) + min;
    // }
    // const getData = () => {
    //   return JSON.parse(JSON.stringify(this.originData)).map(v => {
    //     v.stauts = getRndInteger(1, 5)
    //     if (v.stauts === 2) v.content = v.content.replace('：在线', '：离线')
    //     if (v.stauts === 1) v.content = v.content.replace('：28', `：${getRndInteger(31, 36)}`)
    //     if (v.stauts === 3) v.content = v.content.replace('：28', `：${getRndInteger(23, 26)}`)
    //     if (v.stauts === 4) v.content = v.content.replace('：28', `：${getRndInteger(36, 41)}`)
    //     return v
    //   })
    // }
    // this.mulData = [
    //   getData(), getData(), getData()
    // ]
  },
  methods: {
    //获取单元住户列表
    getUnitHouseholdList() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.1)'
      });
      getUnitHousehold(this.queryParams).then(res => {
        loading.close();
        let buildUnitVoList = JSON.parse(JSON.stringify(res.data.buildUnitVoList));
        // console.log(buildUnitVoList);
        
        let unit = 1
        if (Array.isArray(buildUnitVoList)) {
          let maxHouse = 0
          //遍历单元列表
          for (let i = 0; i < buildUnitVoList.length; i++) {
            let householdVoList = buildUnitVoList[i].householdVoList
            // //获取门户号后两位列表
            let templist = householdVoList.map(res=>res.houseNumber.split('-')[2].slice(-2))
            console.log("templist",templist);
            // //去重排序
            maxHouse = parseInt([...new Set(templist)].sort((a, b) => b - a)[0])
            console.log("最大门牌号",maxHouse);
            console.log("最初的楼栋信息",res.data.buildUnitVoList);
            if (Array.isArray(householdVoList)) {
              if (householdVoList.length <= 0 && i != 0) {
                unit = Number(unit) + 1
              }
              let maxFoloor = buildUnitVoList[i].floorNumber
              let build = 1
              //遍历数据找最大户数和楼号单元号
              for (let i = 0; i < householdVoList.length; i++) {
                let houseCodeArr = householdVoList[i].houseNumber.split('-')
                // let houseNum = Number(houseCodeArr.pop().replace(householdVoList[i].floor.toString(), ''))
                
                let firstChar
                let remainingChars
                if(houseCodeArr[2].length==3){
                  firstChar = houseCodeArr[2].substring(0, 1); // 获取第一个字符
                  remainingChars = houseCodeArr[2].substring(1); // 获取剩余的字符
                }
                if(houseCodeArr[2].length==4){
                  firstChar = houseCodeArr[2].substring(0, 2); // 获取前两个字符
                  remainingChars = houseCodeArr[2].substring(2); // 获取剩余的字符
                }
                
                let houseNum = remainingChars
                // console.log('房号',houseNum);



                if (houseNum > maxHouse) {
                  maxHouse = houseNum
                }
                if (i == 0) {
                  build = houseCodeArr[0]
                  unit = houseCodeArr[1]
                }
              }
              let unitArr = []
              let stateMap = new Map([
                [null, '未知'],
                [0, '未知'],
                [1, '在线'],
                [2, '离线'],
              ])
              for (let j = 1; j <= maxFoloor; j++) {
                let houseArr = []
                for (let k = 1; k <= maxHouse; k++) {
                  let houseNumber = build + '-' + unit + '-' + j + (k > 9 ? k : '0' + k)
                  let index = householdVoList.findIndex(item => item.houseNumber === houseNumber)
                  if (index != -1) {
                    let householdVoItem = householdVoList[index]
                    householdVoItem.content = `${houseNumber}\n室温采集器状态：${stateMap.get(householdVoItem.deviceStatus)}\n阀门状态：${stateMap.get(householdVoItem.status)}\n阀门开度：${householdVoItem.valveOpen ? householdVoItem.valveOpen + '%' : '未知'}\n室温：${householdVoItem.roomTemperature ? householdVoItem.roomTemperature + '℃' : '未知'}`
                    houseArr.push(householdVoList[index])
                  } else {
                    houseArr.push({
                      status: -1,
                      houseNumber,
                      floor: k,
                      valveOpen: null,
                      roomTemperature: null,
                      content: `${houseNumber}\n住户未录入`
                    })
                  }
                }
                console.log("houseArr",houseArr);
                unitArr.push(houseArr)
              }
              console.log("unitArr",unitArr);
              buildUnitVoList[i].householdVoList = unitArr
              console.log("楼栋信息",buildUnitVoList)
            } else {
              buildUnitVoList[i].householdVoList = []
            }
          }
        }
        // this.mulData = res.data.buildUnitVoList
        this.mulData = buildUnitVoList
        console.log("this.mulData",this.mulData);
      }).catch(err => {
        loading.close();
      })
    },
    plotChange(id) {
      listBuildSelect({ plotId: id }).then(res => {
        this.queryParams.buildId = null
        this.loudongData = res.rows
      })
    },
    buildChange(id) {
      this.getUnitHouseholdList()
    },
    // 获取小区列表
    getPlotSelectList() {
      listCPlotSelect({}).then(res => {
        this.xiaoquData = res.rows
      })
    },
    goDetailed(item) {
      if (item.status != -1 && item.id) {
        let plotId = this.queryParams.plotId
        let buildId = this.queryParams.buildId
        this.$router.push({
          path: `/balancedView/resident`,
          query: {
            plotId,
            buildId,
            householdId: item.id,
          }
        })
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.list_box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;

  .tag {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    border-radius: 50%;
  }

  .word {
    margin-right: 20px;
    font-size: 20px;
    color: #fff;
  }

  .color1 {
    background: #00B4FF;
  }

  .color2 {
    background: #FAC74F;
  }

  .color3 {
    background: #FE9A76;
  }

  .color4 {
    background: #FF0045;
  }

  .color5 {
    background: #DDDDDD;
  }
}

.box {
  width: 100%;
  display: flex;
  // flex-wrap: wrap;
  min-height: calc(100vh - 250px);
  flex-wrap: nowrap;
  overflow-x: auto;
  align-items: flex-end;

  .container {
    margin-bottom: 20px;
    min-height: 400px;
    // width: 500px;
    // background-color: greenyellow;
    display: flex;
    position: relative;
    align-items: flex-end;
    margin-left: 50px;

    .left {
      height: 300px;
      width: 500px;
      position: absolute;
      left: 0;
      bottom: 0;
    }

    .right {
      height: 100%;
      // background-color: #00B4FF;
      margin-left: 100px;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;


      .right_top {
        width: 100%;
        height: 100px;
        // background: url('../../assets/images/top.png') no-repeat;
        background-size: cover;
        position: relative;

        .word {
          width: 80%;
          text-align: center;
          box-sizing: border-box;
          font-size: 20px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
          background: #094d8d;
          margin: auto;
          height: 40px;
          line-height: 40px;
        }

        .leftLine {
          position: absolute;
          width: 20px;
          height: calc(100px - 70px);
          background: #00a0e4;
          left: 20%;
          bottom: 30px;
        }

        .rightLine {
          position: absolute;
          width: 20px;
          height: calc(100px - 70px);
          background: #00a0e4;
          right: 20%;
          bottom: 30px;
        }

        .build-top-bottom {
          position: absolute;
          width: 100%;
          height: 30px;
          background: #094d8d;
          right: 0;
          bottom: 0px;
        }

      }

      .right_bottom {
        min-width: 200px;
        background: url('../../assets/images/center.png') no-repeat;
        background-size: cover;
        // background-color: #FAC74F;
        padding: 10px 10px 30px;
        box-sizing: border-box;
        flex: 1;
        display: flex;
        flex-direction: row-reverse;
        flex-wrap: wrap-reverse;
        vertical-align: bottom;
        // flex-wrap: wrap;
        // justify-content: space-between;
        // align-items: flex-end;

        .floor {
          width: 100%;
          display: flex;
          align-items: flex-end;
          flex-wrap: nowrap;
          justify-content: space-around;

        }


        .s_box {
          width: 78px;
          height: 50px;
          background-color: #9a9a9a;
          color: #fff;
          text-align: center;
          line-height: 50px;
          font-size: 13px;
          border-radius: 5px;
          margin: 5px 10px;
          position: relative;
          cursor: not-allowed;

          .back_img {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
          }


          span {
            display: block;
            width: 100%;
            left: 50%;
            transform: translateX(-50%);
            position: absolute;
            z-index: 999;
          }
        }

        .b_box {
          width: 78px;
          height: 50px;
          border-radius: 5px;
          // background-color: #dfdfdf;
          background-color: #fff;
          font-size: 13px;
          color: #333333;
          text-align: center;
          line-height: 50px;
          margin: 5px 10px;
          cursor: pointer;
          position: relative;

          .back_img {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
          }

          span {
            display: block;
            width: 100%;
            left: 50%;
            transform: translateX(-50%);
            position: absolute;
            z-index: 999;
          }
        }

        .noColor {
          width: 109px;
          height: 77px;
          background-color: unset;
          // background: url('../../assets/images/fang.png') no-repeat;
          background-size: cover;
          margin-bottom: -20px;
        }
      }
    }

  }

}
// 提示框
.s_box:hover::before {
  content: attr(data-attr);
  width: 145px !important;
  // height: 109px !important;
  position: absolute !important;
  top: -89px !important;
  left: 40px !important;
  z-index: 9999 !important;
  background: rgba(0, 89, 126, 0.9) !important;
  border-radius: 5px !important;
  border: 1px solid #00B4FF !important;
  white-space: pre;
  line-height: 22px;
  color: #fff;
  font-size: 13px;
}
// 提示框
.b_box:hover::before {
  content: attr(data-attr);
  color: #fff;
  font-size: 13px;
  width: 145px !important;
  // height: 109px !important;
  position: absolute !important;
  top: -89px !important;
  left: 40px !important;
  z-index: 9999 !important;
  background: rgba(0, 89, 126, 0.9) !important;
  border-radius: 5px !important;
  border: 1px solid #00B4FF !important;
  white-space: pre;
  line-height: 22px;
}


.lanse{
        background-image: url("../../assets/images/back (3).png");
        background-size: 100px;
        background-repeat: no-repeat;
        background-color: #fff;
        background-position: 0 22px;
        // background-repeat: repeat-x; 
        // animation: moveBackground 100s linear infinite; 
  }
//   @keyframes moveBackground {
//   0% {
//     background-position: 0 22px; /* 初始位置，无偏移 */
//   }
//   100% {
    
//     background-position: -100% 22px; /* 结束位置，向左偏移100% */
    
//   }
// }
  .huangse{
        background-image: url("../../assets/images/back (5).png");
        background-size: 120px;
        background-position: 0 -21px;
        background-color: #fff;
        background-repeat: no-repeat;

  }
  .chengse{
        background-image: url("../../assets/images/back (6).png");
        background-size: 116px;
        background-position: 0 -17px;
        background-color: #fff;
        background-repeat: no-repeat;

  }
  .hongse{
        background-image: url("../../assets/images/back (4).png");
        background-size: 124px;
        background-color: #fff;
        background-repeat: no-repeat;

  }
  .allhongse{
    background-color: #FF0045;
  }
.allbaise{
  background-color: #FFFFFF;
}

.wave {
  width: 100%;
  height: 100%;
  // outline: 2px dashed gray;
  --c: #fff;
  --l:50%;
  --r:calc(113% - var(--l));
  --w1: radial-gradient(100% var(--l) at bottom, var(--c) 100%,#fff 100.5%) no-repeat;
  --w2: radial-gradient(100% var(--r) at top ,#fff 100%,var(--c) 100.5%) no-repeat;
  background: var(--w1),var(--w2),var(--w1),var(--w2);
  background-position-x: -200%, -100%, 0%, 100%;
  background-size: 50.5% 100%;
}

@keyframes m {
  0%  {background-position-x:-200%, -100%, 0%, 100%}
  100%{background-position-x:  0%, 100%, 200%, 300%}
}

</style>
